<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
</head>

<body>
     <input type="text">
      <div id="app"></div>

     <script>
          function observe(target) {
               const div = document.getElementById("app")
               /* 
                   {
                       title: "Vue",
                       +desc: "描述信息"
                   }
               */
               let props = Object.keys(target)
               let obj = {}
               for (const prop of props) {
                    Object.defineProperty(obj, prop, {
                         get() {
                              return target[prop]
                         },
                         set(value) {
                              target[prop] = value
                              render()
                         }
                    })
               }

               //将数据渲染到浏览器
               function render() {
                    let html = ""
                    for (const item of props) {
                         html += `<p>${item} ----- ${target[item]}</p >`
                    }
                    div.innerHTML = html
               }
               render()
               return obj
          }
          let data = {
               title: "Vue",
               desc: "描述信息"
          }
          let obj = observe(data)
          document.querySelector('input').onkeyup = function () {
               obj.title = this.value
          }
     </script>
</body>

</html>